<template>
  <div class="box-bd clearfix">
    <div class="row">
      <div class="flashsale-countdown rainbow-item-4 span4">
        <div class="round">{{When_Hour}}:00 场</div>
        <img src="data:img/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAA1CAYAAAAklDnhAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJ
bWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdp
bj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6
eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1
MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJo
dHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlw
dGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAv
IiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RS
ZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpD
cmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5j
ZUlEPSJ4bXAuaWlkOjY4Q0ZFMkY5MTJFNzExRThCMkM4OEM1RTNBNjczQUVBIiB4bXBNTTpEb2N1
bWVudElEPSJ4bXAuZGlkOjY4Q0ZFMkZBMTJFNzExRThCMkM4OEM1RTNBNjczQUVBIj4gPHhtcE1N
OkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NjhDRkUyRjcxMkU3MTFFOEIy
Qzg4QzVFM0E2NzNBRUEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NjhDRkUyRjgxMkU3MTFF
OEIyQzg4QzVFM0E2NzNBRUEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94Onht
cG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5oEyacAAACoklEQVR42sSYv0tbURTHX0LqD6T4g4pE
cHDoUOloBxVd/QFFEcQqWtrSKlKFmmAslopohzgIbv4FwUEE0clFujiIi+BSIbRQ0ooKRReRULHf
S48Qgu++c3/FAx+iyU3eJzf3nnPuC/1qavQ04zVY8szjCHRGNN9cBD6DSkOJKzAGzsOaH/AW1FuY
jRg4EH/oiJSCTxYk1sDK7T86Iu9BraHED/Au9wlVkYdg2lAiC/rBhYnIB/DIUOQj2M9/UkWkCsQN
JbbA8l0vqIhMgXIDiZ/gFbgxEakBEwYSf8Eg+OM3gCsyA8oMRETy25UN4IjUgVEDiW2wGDSIIzIL
ijUljsFLv3WhIvKYFphOXNO6OOUMDhKZA7qFcQF85Q6WXeQpeKEpcULlvY8xthp8iwR8I93qLLb7
KnOsSPWNfhd6Bro99yHqTi9IhyWzEXIsIXbSG7Djt1jbQHsBZkMkyZRs13wpgIRoiJKy7dsBWh1L
bN5Vt3JFQrQ2XMYeGKBk5yvSI7aRQ4k0eA4uZZlVPM47lDgTZxd6lKb4AcqkLuKSZiIdVGsiVFNc
xDV9yT1Orekjoe+MDw4pHqwmaJewit66Ql0QaX+DOTaZe4DitAFZxQaaEynKnJ6KCDeaQAtj3A7V
kBtXIpwT3iFV06zqquaKPKEtKIsM6Mo/StoWiQeMvSCJjO4+54hEwTCjuTk0STgckUm6QxTY3LgU
Kc+/jyFrblyKCIkKbnPjSkT8HDGV5saVyBAtVHZz40Ik7HNTRtrcuBARF2tQbW5ciCR0mhvbIs2E
cnNjWySh29zYFGnIK25KzY1Nkdziptzc2BKJUu7Qbm5sicQom2o3NzZEKqiu/DZpbmyIjIAHNBMZ
7x4iTALjhcgVQSIl3v87w5vePcY/AQYAFYR6skFSqBUAAAAASUVORK5CYII=" alt="小米闪购">
        <div class="desc">距离结束还有</div>
        <div class="countdown clearfix">
          <span>{{(When_Hour+1)-When_Hour}}</span>
          <i>:</i>
          <span>{{59-When_Minute}}</span>
          <i>:</i>
          <span>{{59-When_Second}}</span>
        </div>
      </div>
      <div class="span16 flashsale-list swiper-container swiper-no-swiping swiper-container-initialized swiper-container-horizontal">
        <ul class="swiper-wrapper" :style="{transform:' translateX('+ translateXX+'px)', transitionDuration: translateDur+'ms'}">
          <li class="swiper-slide rainbow-item-1 swiper-slide-active" style="width: 234px; margin-right: 14px;" v-for="i in 8" :key='i'>
            <a href="//www.mi.com/buy/seckill">
              <div class="content">
                <div class="thumb">
                  <img src="../../../assets/imgs/mi-wirelesspad.png" alt="" width="160" height="160">
                </div>
                <h3 class="title">小米多功能运动休闲胸包 黑色 黑色</h3>
                <p class="desc">小而精致</p>
                <p class="price">
                  <span>59</span>元&nbsp;<del>69元</del>
                </p>
              </div>
            </a>
          </li>
        </ul>
      </div>
      <div class="swiper-controls">
        <!-- :class="translateXX=0 ?'swiper-button-disabled' : '' -->
        <span class="swiper-flashsale-prev" :class="translateXX===0 ? 'swiper-button-disabled' : ''" role="button" @click="prev">
          <i>&lt;</i>
        </span>
        <span class="swiper-flashsale-next" :class="translateXX==-992 ? 'swiper-button-disabled' : ''" role="button" @click="next">
          <i>&gt;</i>
        </span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Content',
  data() {
    return {
      translateXX: 0,
      translateDur: 0,
      // Daojishi: '',
      When_Hour: '',
      When_Minute: '',
      When_Second:'',
      timer: null,
      time: 0
    }
  },
  created(){
    this.timer = setInterval(() => {
      this.time++;
      if (this.time == 10) {
        this.Daojishi();
        this.time = 0;
      }
    }, 100);
  },
  mounted(){
    
  },
  methods:{
    prev(){
      if(this.translateXX<0){
        this.translateXX += 992
        this.translateDur = 1000
      }
    },
    next(){
      // this.translateXX -= 992
      // this.translateDur = 1000
      if(this.translateXX>-234*4){
        this.translateXX -= 992
        this.translateDur = 1000
      }
    },
    Daojishi(){
      var h = new Date;
      this.When_Hour =h.getHours()
      this.When_Minute=h.getMinutes()
      this.When_Second = h.getSeconds()
    }
  }
};
</script>

<style lang="less" scoped>
.row {
  margin-left: -14px;
}
.home-flashsale .rainbow-item-4 {
  border-top-color: #e53935;
}
.home-flashsale .flashsale-countdown {
  height: 300px;
  padding-top: 39px;
  border-top-width: 1px;
  border-top-style: solid;
  background: #f1eded;
  text-align: center;
  .round{
    font-size: 21px;
    color: #ef3a3b;
    padding-top: 15px;
  }
  img{
    margin: 20px auto;
  }
  .desc{
    color: rgba(0,0,0,.54);
    font-size: 15px;
  }
  .countdown{
    width: 168px;
    margin: 28px auto 0;
    span{
      width: 46px;
      height: 46px;
      background: #605751;
      color: #fff;
      font-size: 24px;
      line-height: 46px;
      float: left;
    }
    i{
      width: 15px;
      float: left;
      height: 46px;
      line-height: 46px;
      color: #605751;
      font-size: 28px;
      font-style: normal;
    }
  }
}

.home-flashsale .rainbow-item-4 {
  border-top-color: #e53935;
}
.home-flashsale .flashsale-countdown {
  height: 300px;
  padding-top: 39px;
  border-top-width: 1px;
  border-top-style: solid;
  background: #f1eded;
  text-align: center;
}
.span4 {
  width: 234px;
}



// 右边的轮播商品
.home-flashsale .flashsale-list {
  float: left;
  .swiper-wrapper{
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-transition-property: -webkit-transform;
    transition-property: -webkit-transform;
    transition-property: transform;
    transition-property: transform,-webkit-transform;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
  }
  li{
    width: 234px;
    margin-right: 14px;
    border-top-width: 1px;
    border-top-style: solid;
    text-align: center;
    background: #fff;
    -webkit-transition: all .6s;
    transition: all .6s;
    position: relative;
    list-style: none;
    a{
      display: block;
      height: 300px;
      padding-top: 39px;
      position: relative;
    }
    a::after{
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      z-index: 2;
      background: rgba(0,0,0,.02);
    }
    .thumb{
      display: block;
      width: 160px;
      margin: 0 auto 22px;
      img{
        width: 160px;
        height: 160px;
      }
    }
    .title{
      margin: 0 20px 3px;
      font-size: 14px;
      font-weight: 400;
      text-overflow: ellipsis;
      color: #212121;
      overflow: hidden;
      white-space: nowrap;
    }
    .desc{
      height: 18px;
      margin: 0 20px 12px;
      font-size: 12px;
      text-overflow: ellipsis;
      color: #b0b0b0;
      overflow: hidden;
      white-space: nowrap;
    }
    .price{
      margin: 0;
      color: #ff6709;
      del{
       color: #b0b0b0;; 
      }
    }
  }
  
}
.span16 {
  width: 978px;
}
.swiper-container {
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  z-index: 1;
}


// 左右滚动控制按钮
.home-flashsale .swiper-controls {
  position: absolute;
  right: 0;
  top: 24px;
  .swiper-button-disabled {
    color: #e0e0e0 !important;
    cursor: default !important;
  }
  .swiper-flashsale-prev,.swiper-flashsale-next{
    display: inline-block;
    width: 24px;
    height: 16px;
    padding: 3px 5px;
    margin-left: -1px;
    border: 1px solid #e0e0e0;
    font-size: 16px;
    line-height: 16px;
    -webkit-transition: color .5s;
    transition: color .5s;
    color: #b0b0b0;
    text-align: center;
    cursor: pointer;
    user-select:none;
  }
  .swiper-flashsale-prev :hover,
  .swiper-flashsale-next :hover{
    color:#ff6700 ;
  }
}
</style>
